<template>
	<base-popup
		:modelValue="walletStore.showValidate"
		:lock-scroll="false"
		teleport="body"
		@close="onClose"
		:title="currentTitle"
		:isGoBack="currentType !== 'entrance'"
		@goBack="currentType = 'entrance'">
		<component :is="component" :bankCards="bankCards" @select="handleSelect" />
	</base-popup>
</template>

<script lang="ts" setup>
import { computed, ref, watch } from 'vue'
import ValidateEntrance from './validate-entrance.vue'
import WalletBinding from '../binding/index.vue'
import BindBank from './bind-bank.vue'
import { t } from '@/utils'
import { useProfileStore, useWalletStore } from '@/store'
import { BasePopup } from '@/components/base'

defineOptions({ name: 'ViewsWalletValidate' })

const profileStore = useProfileStore()
const walletStore = useWalletStore()
const bankCards = computed(() => profileStore.userInfo?.bankCards || [])

defineProps({
	modelValue: {
		type: Boolean,
		default: false
	}
})

const currentType = ref('entrance')

const currentTitle = computed(() => {
	switch (currentType.value) {
		case 'mobile':
			return t('validate.verification')
		case 'bank':
			return t('validate.bankAccount')
		default:
			return ''
	}
})

const component = computed(() => {
	switch (currentType.value) {
		case 'mobile':
			return WalletBinding
		case 'bank':
			return BindBank
		default:
			return ValidateEntrance
	}
})

const handleSelect = (type: any) => {
	currentType.value = type
}

const onClose = () => {
	walletStore.setValidateShow(false)
}

watch(
	() => walletStore.showValidate,
	(newVal) => {
		if (!newVal) {
			profileStore.getUserInfo()
		}
	}
)
</script>
<style scoped lang="scss"></style>
